<template>
  <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="left">
    <el-form-item label="名称" prop="name">
      <el-input v-model="form.name" clearable></el-input>
    </el-form-item>
    <el-form-item label="环境" prop="env">
      <el-input v-model="form.env" clearable></el-input>
    </el-form-item>
    <el-form-item label="厂商" prop="vendor">
      <el-input v-model="form.vendor" clearable></el-input>
    </el-form-item>
    <el-form-item label="代码" prop="code">
      <el-input v-model="form.code" clearable></el-input>
    </el-form-item>
    <el-form-item label="配置" prop="config">
      <el-input v-model="form.config" type="textarea" :rows="6" clearable></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    mode: { type: String, default: "add" }
  },
  data() {
    return {
      //表单数据
      form: {
        id: "",
        name: "",
        env: "",
        vendor: "",
        code: "",
        config: ""
      },
      //验证规则
      rules: {
        name: [
          {required: true, message: '请输入名称'}
        ],
        env: [
          {required: true, message: '请输入环境'}
        ],
        vendor: [
          {required: true, message: '请输入厂商'}
        ],
        code: [
          {required: true, message: '请输入代码'}
        ]
      },
    }
  },
  mounted(){

  },
  methods: {
    //表单提交方法
    submit(callback){
      this.$refs.dialogForm.validate((valid) => {
        if (valid) {
          callback(this.form)
        }else{
          return false;
        }
      })
    },
    //表单注入数据
    setData(data){
      this.form.id = data.id
      this.form.name = data.name
      this.form.env = data.env
      this.form.vendor = data.vendor
      this.form.code = data.code
      this.form.config = data.config
    }
  }
}
</script>

<style>
</style>